﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height: 100%;width:100%">
<head>
	<title>Chart Report</title>
	<meta charset="UTF-8">
	<meta HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=utf-8'/>
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="Generator" content="Oybab Trading System">
	<meta name="Author" content="Oybab">
	<style type="text/css">
		.xrcsFont8 {color:#000000;font-family:'Microsoft YaHei'; font-size:11px;}
		.xrcsFont9 {color:#000000;font-family:'Microsoft YaHei'; font-size:12px;}
		.xrcsFont10 {color:#000000;font-family:'Microsoft YaHei'; font-size:13px;}
		.xrcsFont11 {color:#000000;font-family:'Microsoft YaHei'; font-size:15px;}
		.xrcsFont12 {color:#000000;font-family:'Microsoft YaHei'; font-size:16px;}
		.xrcsFont13 {color:#000000;font-family:'Microsoft YaHei'; font-size:17px;}
		.xrcsFont14 {color:#000000;font-family:'Microsoft YaHei'; font-size:18px;}
		.xrcsFont15 {color:#000000;font-family:'Microsoft YaHei'; font-size:20px;}
		.xrcsFont16 {color:#000000;font-family:'Microsoft YaHei'; font-size:21px;}
		.xrcsFont17 {color:#000000;font-family:'Microsoft YaHei'; font-size:22px;}
		.xrcsFont18 {color:#000000;font-family:'Microsoft YaHei'; font-size:23px;}

		.FixIE7 {height:0px;width:0px;overflow:hidden;font-size:0px;line-height:0px;}
        .Line{ border-bottom: #000000 1px dashed; width:200mm;}

        /* This place replace dynamically if needed */
		/*${DynamicStyles}*/

        /* For display tr border and fixed table size */ 
		table{ border-collapse:collapse; table-layout:fixed; }
		/* For fixed td size */ 
		td{word-wrap:break-word; overflow-wrap: break-word; word-break: break-word;}
        /* For fix pdf margin */
		body{ height:100%;width:100%; margin:0px; text-align:center}


		.center-screen {
		  display: inline-block;
		}

	</style>
	<!--${DynamicImportExcanvas}-->
</head>
<body  style="background-color:#FFFFFF">
<div  class="center-screen" style="margin:20,10;width:100%;height:100%">
	  <div id="container" class="xrcsFont12" style="height: 100%;width:100%"></div>
</div>

<!--${DynamicImportJquery}-->
<!--${DynamicImportCharJs}-->

<script type="text/javascript">

var parameters = null;
var dataSource = null;
var isGenerated = false;

/* This place replace dynamically if needed */
/*${DynamicParameter}*/
/*${DynamicDataSource}*/
/*${DynamicIsGenerated}*/


if (null != parameters && isGenerated == true)
{
	var parametersObj = JSON.parse(parameters.replace("\r\n","<br/>"));
	for(var item in parametersObj) {
		var ojbInItem = parametersObj[item];
		for(var key in ojbInItem)
		{

		
		}
	}

}


if (null != dataSource && isGenerated == true)
{

	
		//var colorsList = ['#DC634E', '#2A84BE', '#85CE59', '#8FCCF4', '#EA8441', '#9171B8', '#EEBD3A', '#ACACAC'];
		var colorsList = ['#4274AF', '#B3423F', '#8EB048', '#735893', '#3BA0BB', '#F4740B', '#497CBB', '#BE4946', '#97B852', '#7C5F9E', '#44A9C4', '#F68B32', '#7199CA', '#CC726F', '#AEC878', '#9982B4', '#6DBCD1', '#F8A763', '#B5CAE3', '#E4B5B4', '#D3E1B7', '#CBBFD9', '#B2DBE6', '#FBC89D'];

		var dom = document.getElementById("container");
		var myChart = echarts.init(dom);
		var app = {};
		option = null;
		option = {
			textStyle: {
				fontFamily: 'Microsoft YaHei',
			},
			color: [],
			tooltip: {
				transitionDuration: 0,
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'none'        // 默认为直线，可选为：'line' | 'shadow'
				},
				//extraCssText:'direction:ltr'
				 formatter: function(params, ticket, callback) {
					return  "<div><div>" + params[0].name + "<br/><span>&lrm;" + params[0].value + "</span></div><div>";
				  },
			},
			xAxis: {
				type: 'category',
				data: [],
				axisLabel:{
					fontSize: 14
					//color: 'black'
				}
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [],
				type: 'bar'
			}]
		};

			option.textStyle.fontFamily =  $("#container").css("font-family");
			

			var dynamicColors = function() {
            var r = Math.floor(Math.random() * 255);
            var g = Math.floor(Math.random() * 255);
            var b = Math.floor(Math.random() * 255);
            return "rgb(" + r + "," + g + "," + b + ")";
         };

			var newTrList = "";
			var dataSourceObj = JSON.parse(dataSource);
			var no = 1;
			for(var item in dataSourceObj) {
					var ojbInItem = dataSourceObj[item];

					var color = null;
					if (colorsList.length > 0)
					{
						color = colorsList.shift()
					}
					else
					{
						color = dynamicColors();
					}


					option.color.push(color);
					option.xAxis.data.push(ojbInItem["Name"]);

					var newData =  {
						value: 0,
						itemStyle: { normal: { color: 'Black' } },
					};

					var value = 0;
					if (typeof (ojbInItem["Value"]) != "undefined")
					{
						value = ojbInItem["Value"];
					}

					newData.value = value;
					newData.itemStyle.normal.color= color;
					option.series[0].data.push(newData);
			}
			
			
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}

	window.onresize = function() {
	  myChart.resize();
	};

}

</script>
</body>
</html>	